<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>JSON转YAML,YAML转JSON - 在线工具 - OKTools</title>
    <meta name="keywords" content="JSON转YAML,YAML转JSON">
    <meta name="description" content="在线JSON转YAML,YAML转JSON工具,JSON转YAML,YAML转JSON">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <link href="https://cdn.bootcss.com/highlight.js/9.15.9/styles/idea.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 100%;
        }

        pre {
            overflow: auto
        }
    </style>
</head>
<body>
{{template "aside"}}
<main>
    <div class="container">
        <h1>JSON转YAML,YAML转JSON</h1>
        <div class="flex mt1">
            <div class="editarea" onpaste="setTimeout(toYaml, 1)">
                <label>JSON</label>
                <pre id="area_json" class="textarea fullHeight fixed-size" contenteditable="true"></pre>
            </div>
            <div class="mid-menus">
                <div>
                    <button class="button primary" onclick="toYaml()">
                        <span>转YAML</span>
                        <i class="fa fa-arrow-right"></i>
                    </button>
                    <button class="button primary" onclick="toJson()">
                        <i class="fa fa-arrow-left"></i>
                        <span>转JSON</span>
                    </button>
                    <button class="button" data-clipboard-action="copy" data-clipboard-target="#area_json">复制JSON
                    </button>
                    <button class="button" data-clipboard-action="copy" data-clipboard-target="#area_yaml">复制YAML
                    </button>
                    <button class="button" onclick="cleanup()">清空</button>
                </div>
            </div>
            <div class="editarea" onpaste="setTimeout(toJson, 1)">
                <label>YAML</label>
                <pre id="area_yaml" class="textarea fullHeight fixed-size" contenteditable="true"></pre>
            </div>
        </div>
    </div>
</main>
<script src="https://cdn.bootcss.com/highlight.js/9.15.9/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.9/languages/json.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.9/languages/yaml.min.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/js-yaml/3.13.1/js-yaml.min.js"></script>
<script >
    let area_json = document.getElementById('area_json');
    let area_yaml = document.getElementById('area_yaml');

    function toYaml() {
        let json = area_json.innerText;
        if (json) {
            try {
                let jsonObj = JSON.parse(json);
                area_yaml.innerHTML = hljs.highlight("yaml", jsyaml.dump(jsonObj)).value;
                area_json.innerHTML = hljs.highlight("json", json).value;
            } catch (e) {
                alert(e)
            }
        }
    }

    function toJson() {
        let yaml = area_yaml.innerText;
        if (yaml) {
            try {
                let json = JSON.stringify(jsyaml.load(yaml), null, 2);
                area_json.innerHTML = hljs.highlight("json", json).value;
                area_yaml.innerHTML = hljs.highlight("yaml", yaml).value;
            } catch (e) {
                alert(e)
            }
        }
    }

    function cleanup() {
        area_json.innerHTML = '';
        area_yaml.innerHTML = '';
    }

    new ClipboardJS('.button').on('success', function () {
        alert('复制成功')
    }).on('error', function () {
        alert('复制失败,请手动复制')
    });
</script>
</body>
</html>